<template>
    <div class="w">
        <div class="top">
            <h1>退役士兵信息采集</h1>
        </div>
        <ul class="nav">
            <li @click="navFn(item.val)" :class="{active:nav_index==index}" v-for="(item,index) in arr" :key="index">
                <router-link :to="{name:item.name}">{{item.text}}</router-link>
            </li>
            <li><a href="https://www.baidu.com" target="_blank" @click="fns">大数据查看</a></li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            nav_index:0,
            arr:[
                {val:0,name:'home',text:'首页'},
                {val:1,name:'xinxiluru',text:'信息采集'},
                {val:2,name:'news',text:'新闻信息'},
                {val:3,name:'echo_s',text:'个人信息查看'},
            ]
        }
    },
    methods:{
        navFn(data){
            this.nav_index = data
        },
        fns(){
            // window.location.href = ''
        }
    },
    created(){
        this.nav_index = this.$route.meta.indexs
    }
}
</script>

<style scoped>
.w{
    margin-bottom:20px;
}
.top h1{
    height:110px;
    line-height:110px;
    background: url('../assets/images/logo.png') no-repeat left center;
    padding-left:100px;
    /* color:#1E9FFF; */
}
.nav{
    height:45px;
    background:#1E9FFF;
}
.nav li{
    float: left;
}
.nav li a{
    line-height:45px;
    padding:0px 60px;
    display: inline-block;
    color:#FFF;
    font-size:16px;
}
.nav .active a{
    background: #1278c3;
}
</style>